<template>
  <el-dialog class="property-editor" :visible="isVisible" title="查看账单" @close="onCloseDialog">
    <el-descriptions :column="1" label-class-name="description-label" content-class-name="description-content">
      <el-descriptions-item label="租户名称">{{ propertyDetails.enterpriseName }}</el-descriptions-item>
      <el-descriptions-item label="租赁楼宇">{{ propertyDetails.buildingName }}</el-descriptions-item>
      <el-descriptions-item label="缴费周期">{{ propertyDetails.startTime + ' 至 ' + propertyDetails.endTime }}</el-descriptions-item>
      <el-descriptions-item label="物业费(元/m²)">{{ propertyDetails.propertyFeePrice }}</el-descriptions-item>
      <el-descriptions-item label="账单金额(元)">{{ propertyDetails.paymentAmount }}</el-descriptions-item>
      <el-descriptions-item label="支付方式">{{ paymentMethodEnum[propertyDetails.paymentMethod] }}</el-descriptions-item>
      <el-descriptions-item label="缴费时间">{{ propertyDetails.createTime }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script>

export default {
  name: 'PropertyEditor',
  data() {
    return {
      isVisible: false, // 是否显示弹窗
      // 物业费表单数据
      propertyDetails: {},
      paymentMethodEnum: {
        1: '微信',
        2: '支付宝',
        3: '现金'
      }
    }
  },
  methods: {
    // 打开弹窗
    open(row) {
      this.propertyDetails = row
      this.isVisible = true
    },
    onCloseDialog() {
      this.isVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 500px;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0 0;
    .el-dialog__title {
      font-size: 16px;
      color: #303133;
      font-weight: bold;
    }
  }
  .el-dialog__body {
    padding: 20px 80px 40px 80px;
    .el-descriptions {
      .el-descriptions-item {
        padding-bottom: 20px;
        font-size: 15px;
      }
      .description-label {
        width: 35%;
        margin-right: 20px;
        display: flex;
        justify-content: flex-end;
        color: #999;
      }
      .description-content {
        width: 65%;
        color: #222;
      }
    }
  }
}
</style>
